<template>
  <div class="movie-item">
    <NuxtLink
      :to="`/column/${movie.columnValue || 'movie'}/detail/${movie.movieBasicsId}`"
      class="movie-link"
    >
      <!-- 图片容器 -->
      <div class="movie-poster">
        <img
          :src="movie.poster || '/images/default-poster.jpg'"
          :alt="movie.title"
          loading="lazy"
        />

        <!-- 评分 -->
        <span v-if="movie.movieRate?.rate > 0" class="movie-rate">
          {{ movie.movieRate.rate.toFixed(1) }}
        </span>

        <!-- 付费标签 -->
        <span v-if="movie.isPay === 1" class="movie-vip">
          VIP
        </span>

        <!-- 更新标记 -->
        <span v-if="movie.remark && movie.remark.includes('更新')" class="movie-update">
          {{ movie.remark }}
        </span>
      </div>

      <!-- 文字信息 -->
      <div class="movie-info">
        <h3 class="movie-title" :title="movie.title">
          {{ movie.title }}
        </h3>
        <p class="movie-desc">
          {{ getMovieDesc() }}
        </p>
      </div>
    </NuxtLink>
  </div>
</template>

<script setup lang="ts">
interface MovieRate {
  rate?: number
  rateUserCount?: number
}

interface Actor {
  actorId?: number
  name?: string
  nameEn?: string
}

interface Cast {
  castId?: number
  actor?: Actor
  name?: string
}

interface Movie {
  movieBasicsId: number
  title: string
  titleEn?: string
  poster?: string
  columnValue?: string
  status?: string
  isPay?: number
  remark?: string
  summary?: string
  tags?: string
  year?: string
  movieRate?: MovieRate
  casts?: Cast[]
}

const props = defineProps<{
  movie: Movie
}>()

const getMovieDesc = () => {
  if (props.movie.casts && props.movie.casts.length > 0) {
    const names = props.movie.casts.slice(0, 2).map(cast => cast.actor?.name || cast.name)
    return names.filter(Boolean).join('、') || props.movie.year || '-'
  }
  return props.movie.blurb || props.movie.tags || props.movie.year || '-'
}
</script>

<style scoped>
/* 影视项容器 */
.movie-item {
  width: 100%;
  height: 100%;
}

.movie-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* 海报容器 */
.movie-poster {
  position: relative;
  width: 100%;
  padding-bottom: 133.33%; /* 3:4 宽高比 */
  background: #2a2b2e;
  border-radius: 6px;
  overflow: hidden;
}

.movie-poster img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.movie-link:hover .movie-poster img {
  transform: scale(1.05);
}

/* 评分 */
.movie-rate {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffd700;
  font-size: 11px;
  font-weight: bold;
  border-radius: 3px;
  backdrop-filter: blur(4px);
  z-index: 2;
}

/* VIP标签 */
.movie-vip {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 6px;
  background: linear-gradient(135deg, #ff9800, #ff5722);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  border-radius: 3px;
  z-index: 2;
}

/* 更新标记 */
.movie-update {
  position: absolute;
  top: 8px;
  left: 0;
  padding: 2px 8px;
  background: rgba(76, 175, 80, 0.9);
  color: #fff;
  font-size: 10px;
  border-radius: 0 3px 3px 0;
  z-index: 2;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 文字信息 */
.movie-info {
  padding: 8px 4px 4px;
}

.movie-title {
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  font-weight: normal;
  margin: 0 0 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.movie-desc {
  color: #999;
  font-size: 11px;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 移动端优化 */
@media (max-width: 640px) {
  .movie-poster {
    padding-bottom: 140%; /* 移动端稍微高一点 */
  }

  .movie-title {
    font-size: 11px;
  }

  .movie-desc {
    font-size: 10px;
  }
}
</style>
